<template>
  <page-header-wrapper>
    <a-card>
      <a-form-model ref="formData" :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="区域分红" prop="area_agent_switch">
              <a-radio-group v-model="formData.area_agent_switch">
                <a-radio :value="1"> 开启 </a-radio>
                <a-radio :value="0"> 关闭 </a-radio>
              </a-radio-group>
              <div class="ant-form-explain">关闭则所有区域分红功能不生效</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="区域积分释放" prop="area_integral_type">
              <a-radio-group v-model="formData.area_integral_type">
                <a-radio :value="1">定时释放</a-radio>
                <a-radio :value="2">任务释放</a-radio>
              </a-radio-group>
              <div class="flex-y-cen" v-if="formData.area_integral_type == 1">
                每日释放比例<a-input-number
                  style="margin: 0 5px"
                  v-model="formData.area_integral_value"
                  :min="0"
                  :formatter="(value) => `${value}%`"
                  :parser="(value) => value.replace('%', '')"
                />等于区域待释放积分*比例
              </div>
              <div class="flex-y-cen" v-if="formData.area_integral_type == 2">
                看广告<a-input-number
                  style="margin: 0 5px"
                  v-model="formData.area_integral_rate"
                  :min="0"
                  :formatter="(value) => `${value}条`"
                  :parser="(value) => value.replace('条', '')"
                />
              </div>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item>
          <div class="label_text" slot="label">区域代理级别设置<span>(比例为空或0，则该区域级别不生效)</span></div>
          <div class="level_list">
            <div class="item" v-for="(item, index) in formData.level_data" :key="index">
              <div class="label">
                {{
                  item.area_level == 1
                    ? '省代'
                    : item.area_level == 2
                    ? '市代'
                    : item.area_level == 3
                    ? '区/县代'
                    : '街/镇代'
                }}
              </div>
              <div class="input_box">
                比例<a-input-number
                  :formatter="(value) => `${value}%`"
                  :parser="(value) => value.replace('%', '')"
                  v-model="item.area_rate"
                  :min="0"
                />
              </div>
              <div class="input_box">
                股东<a-input-number
                  v-model="item.holder_max"
                  :min="0"
                  :formatter="(value) => `${value}人`"
                  :parser="(value) => value.replace('人', '')"
                />
              </div>
              <div class="input_box">
                价格<a-input-number
                  v-model="item.price"
                  :min="0"
                  :formatter="(value) => `${value}元`"
                  :parser="(value) => value.replace('元', '')"
                />
              </div>
              <div class="input_box">
                <a-select style="width: 90px" placeholder="等级" v-model="item.team_level">
                  <a-select-option v-for="(item, index) in levelList" :key="index" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
                <!-- <a-select style="width: 90px" placeholder="等级">
                  <a-option v-for="(item, index) in levelList" :key="index" :value="item.id">{{ item.name }}</a-option>
                </a-select> -->
                <!-- <a-input placeholder="等级" style="width: 90px" v-model="item.team_level"></a-input> -->
              </div>
              <div class="input_box">
                月业绩<a-input-number
                  v-model="item.month_achievement"
                  :min="0"
                  :formatter="(value) => `${value}元`"
                  :parser="(value) => value.replace('元', '')"
                />
              </div>
              <div class="input_box">
                连续<a-input-number v-model="item.no_reach_max" :min="0" />
                个月不达标
              </div>
              <div style="width: 100%; display: flex; align-items: center; flex-wrap: wrap; padding: 10px 0 0 60px">
                <div class="input_box">
                  推荐奖<a-input-number
                    v-model="item.parent_money"
                    :min="0"
                    :formatter="(value) => `${value}元`"
                    :parser="(value) => value.replace('元', '')"
                  />
                  <a-input-number
                    v-model="item.parent_integral"
                    :min="0"
                    :formatter="(value) => `${value}积分`"
                    :parser="(value) => value.replace('积分', '')"
                  />
                </div>
              </div>
            </div>
          </div>
        </a-form-model-item>
        <a-row>
          <a-col :span="12">
            <a-form-model-item>
              <div class="label_text" slot="label">充值话费区域分红<span>(根据办卡时定位所在地)</span></div>
              <div class="level_list">
                <div class="item">
                  <div class="input_box">
                    佣金<a-input-number
                      v-model="formData.area_recharge_money_num"
                      :min="0"
                      :formatter="(value) => `${value}%`"
                      :parser="(value) => value.replace('%', '')"
                    />
                  </div>
                  <div class="input_box">
                    积分<a-input-number
                      v-model="formData.area_recharge_integral_num"
                      :min="0"
                      :formatter="(value) => `${value}%`"
                      :parser="(value) => value.replace('%', '')"
                    />
                  </div>
                </div>
              </div>
              <div class="ant-form-explain" style="margin-top: 10px">
                充值订单月缴话费金额*该比例*区域比例，空或0则不生效
              </div>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item>
              <div class="label_text" slot="label">激励广告区域分红<span>(根据用户看广告时定位)</span></div>
              <div class="level_list">
                <div class="item">
                  <div class="input_box">
                    佣金<a-input-number
                      v-model="formData.area_ad_money_num"
                      :min="0"
                      :formatter="(value) => `${value}%`"
                      :parser="(value) => value.replace('%', '')"
                    />
                  </div>
                  <div class="input_box">
                    积分<a-input-number
                      v-model="formData.area_ad_integral_num"
                      :min="0"
                      :formatter="(value) => `${value}%`"
                      :parser="(value) => value.replace('%', '')"
                    />
                  </div>
                </div>
              </div>
              <div class="ant-form-explain" style="margin-top: 10px">
                个人所得激励广告积分*该比例*区域比例，空或0则不生效
              </div>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="主页轮播图" prop="index_banner_switch">
              <a-radio-group v-model="formData.index_banner_switch">
                <a-radio :value="1"> 开启 </a-radio>
                <a-radio :value="0"> 关闭 </a-radio>
              </a-radio-group>
              <div v-if="formData.index_banner_switch == 1">
                <!-- 上传图片 -->
                <cyyUploadImg
                  @uploadSuccess="selectPic"
                  @deleteImg="delPic"
                  :imgList.sync="index_banner"
                  dataType="list"
                  imgSizeText="750 * 320"
                >
                </cyyUploadImg>
              </div>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="强制定位" prop="location_switch">
              <a-radio-group v-model="formData.location_switch">
                <a-radio :value="1">强制</a-radio>
                <a-radio :value="0">不强制</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item>
          <a-button type="primary" :loading="loading" @click="submitForm">保存</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
var _self
import { levelSetInfoApi, levelSetSaveApi } from '@/api/area'
import { cyyUploadImg } from '@/components/CyyUi/index'
import { level } from '@/api/shareholder'
export default {
  components: { cyyUploadImg },
  data() {
    return {
      labelCol: { span: 24 },
      wrapperCol: { span: 24 },
      formData: {
        level_data: [],
        area_agent_switch: 1,
        area_integral_type: 1,
        area_integral_value: 0,
        area_integral_rate: 0,
        area_recharge_money_num: 0,
        area_recharge_integral_num: 0,
        area_ad_money_num: 0,
        area_ad_integral_num: 0,
        index_banner_switch: 1,
        location_switch: 1,
        index_banner: [],
      },
      loading: false,
      index_banner: [],
      levelList: [],
    }
  },
  created() {
    _self = this
    _self.getLevelList()
    _self.getInfo()
  },
  methods: {
    getInfo() {
      levelSetInfoApi()
        .then((res) => {
          if (res.code == 0) {
            const { data, option } = res.data
            data.forEach((item) => {
              _self.$set(item, 'team_level', item.team_level + '')
            })
            _self.formData.level_data = data
            _self.formData.area_ad_integral_num = Number(option.area_ad_integral_num) || 0
            _self.formData.area_ad_money_num = Number(option.area_ad_money_num) || 0
            _self.formData.area_agent_switch = option.area_agent_switch === '' ? 0 : Number(option.area_agent_switch)
            _self.formData.area_integral_rate = Number(option.area_integral_rate) || 0
            _self.formData.area_integral_type = option.area_integral_type === '' ? 1 : Number(option.area_integral_type)
            _self.formData.area_integral_value = Number(option.area_integral_value) || 0
            _self.formData.area_recharge_integral_num = Number(option.area_recharge_integral_num) || 0
            _self.formData.area_recharge_money_num = Number(option.area_recharge_money_num) || 0
            _self.formData.index_banner = option.index_banner
            if (option.index_banner) {
              var index_banner = option.index_banner
              index_banner.forEach((item) => {
                _self.index_banner.push({ pic_url: item })
              })
            }
            _self.formData.index_banner_switch =
              option.index_banner_switch === '' ? 0 : Number(option.index_banner_switch)
            _self.formData.location_switch = option.location_switch === '' ? 0 : Number(option.location_switch)
          } else {
            _self.$message.error(res.msg)
          }
        })
        .catch((err) => {})
    },
    async getLevelList() {
      const res = await level({ pageNo: 1, pageSize: 100 })
      if (res.code == 0) {
        this.levelList = res.data.data
      }
    },
    delPic(e) {
      _self.index_banner.splice(e.index, 1)
    },
    selectPic(e) {
      _self.index_banner = _self.index_banner ? _self.index_banner : []
      e.data.forEach((ele) => {
        _self.index_banner.push({ pic_url: ele })
      })
    },
    submitForm() {
      var index_banner = []
      _self.index_banner.forEach((item) => {
        index_banner.push(item.pic_url)
      })
      if (index_banner.length) {
        _self.formData.index_banner = index_banner.join(',')
      }
      _self.$refs.formData.validate((valid) => {
        if (valid) {
          _self.loading = true
          levelSetSaveApi(_self.formData)
            .then((res) => {
              _self.loading = false
              if (res.code === 0) {
                _self.$message.success(res.msg)
              } else {
                _self.$message.error(res.msg)
              }
            })
            .catch((err) => {
              _self.loading = false
              console.log(err, 'err')
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>

<style lang="scss">
.level_list {
  padding-top: 10px;
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    &:last-child {
      margin-bottom: 0;
    }
    .label {
      width: 60px;
    }
    .input_box {
      display: flex;
      align-items: center;
      margin-right: 5px;
      .ant-input-number,
      .ant-select {
        margin: 0 5px;
      }
    }
  }
}
.ant-form-explain {
  line-height: 32px;
}
.label_text {
  display: flex;
  align-items: center;
  span {
    font-size: 12px;
    color: red;
    margin-left: 5px;
  }
}
</style>
